<template>
  <div class="app-container">
    <el-form ref="dataForm" :rules="catalogueRules" :model="catalogueForm" label-position="left" label-width="140px">
       <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="基本" name="first">
          
            <el-form-item label="编码" prop="code">
              <el-input v-model="catalogueForm.code" />
            </el-form-item>
            <el-form-item label="标题" prop="title">
              <el-input v-model="catalogueForm.title" />
            </el-form-item>
            <el-form-item label="平台">
                <el-select v-model="catalogueForm.domainID" class="filter-item" placeholder="选择域名">
                  <el-option v-for="item in domainOptions" :key="item.ID" :label="item.title" :value="item.ID" />
                </el-select>
                <el-select v-model="catalogueForm.platformID" class="filter-item" placeholder="选择平台">
                  <el-option v-for="item in platformOptions" :key="item.ID" :label="item.title" :value="item.ID" />
                </el-select>
            </el-form-item>
            <el-form-item label="地址" prop="url">
              <el-input v-model="catalogueForm.url" />
            </el-form-item>

            <el-form-item label="备注">
              <el-input v-model="catalogueForm.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />
            </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="模板" name="second">
          <el-form-item label="模板">
        <el-row :gutter="20">
          <el-col :span="6">          
          <el-select v-model="catalogueForm.theme" class="filter-item" placeholder="选择平台">
              <el-option v-for="item in themeList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          </el-col>
          <el-col :span="14">   
            <el-select v-model="catalogueForm.primaltplname" class="filter-item" placeholder="选择平台">
              <el-option v-for="item in primaltplnameList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-col>
        </el-row>
        
        
      </el-form-item>
          <el-form-item label="文章模板">
        <el-row :gutter="20">
          <el-col :span="6">          
          <el-select v-model="catalogueForm.theme" class="filter-item" placeholder="选择平台">
              <el-option v-for="item in themeList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          </el-col>
          <el-col :span="14">   
            <el-select v-model="catalogueForm.articlePrimalTplName" class="filter-item" placeholder="选择平台">
              <el-option v-for="item in primaltplnameList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-col>
        </el-row>
        
        
      </el-form-item>
      <el-form-item label="缓存" prop="cached">
        <el-input v-model="catalogueForm.cached" />
      </el-form-item>
      <el-form-item label="缓存时间" prop="cacheTime">
        <el-input v-model="catalogueForm.cacheTime" />
      </el-form-item>

        </el-tab-pane>
        <el-tab-pane label="SEO信息" name="third">
          
          <el-form-item label="SEO标题" prop="seoTitle">
            <el-input v-model="catalogueForm.seoTitle" />
          </el-form-item>
          <el-form-item label="SEO关键字" prop="seoKeyword">
            <el-input v-model="catalogueForm.seoKeyword" />
          </el-form-item>
          <el-form-item label="SEO描述" prop="seoDescrption">
            <el-input v-model="catalogueForm.seoDescrption" />
          </el-form-item>

        </el-tab-pane>
      </el-tabs>
      
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCannel()">
        取消
      </el-button>
      <el-button type="primary" @click="createData()">
        确认
      </el-button>
      <el-button v-if="catalogueForm.status.value === 5" type="danger" @click="handleDelete(catalogueForm)">
        删除
      </el-button>
    </div>
  </div>
</template>

<script>
import { saveCatalogue, removeCatalogueByID, getCatalogueDetail } from '@/api/pagination/catalogue'
import {  getTemplateUsableList } from '@/api/pagination/template'
import { getDomainUsableList } from '@/api/pagination/domain'
import { getPlatformUsableList } from '@/api/pagination/platform'
import waves from '@/directive/waves' // waves directive
import { } from '@/utils'
import Upload from '@/components/Upload/SingleImage' // secondary package based on el-pagination

export default {
  name: 'ComplexTable',
  components: { Upload },
  directives: { waves },
  filters: {
  },
  data() {
    return {
      tableKey: 0,
      filterForm: {
        start: 1,
        perpage: 20,
        keyword: undefined,
        sort: '+id'
      },
       activeName: 'first',
       themeList:[],
      themeList:[],
      primaltplnameList:[],
      domainOptions:[],
      platformOptions:[],
      catalogueForm: {
        code: '',
        title: '',
        domainID: '',
        catalogueID:0,
        platformID: '',
        minimum: '',
        remark: '',
        content: '',
        status: { label: '', value: 1 }
      },
      catalogueRules: []
    }
  },
  created() {
    this.loadDomainList()
    this.loadThemeList()
    let catalogueID = this.$route.query && this.$route.query.catalogueID
    if (catalogueID !== undefined) {
      catalogueID = parseInt(catalogueID)
      if (!isNaN(catalogueID)) {
        this.listLoading = true
        const formData = {
          'catalogueID': catalogueID
        }
        getCatalogueDetail(formData).then(response => {
          if (response.status === 200) {
            this.catalogueForm = response.data
          } else {
            this.$message({
              message: response.msg,
              type: 'error'
            })
          }
        })
      }
    }
    console.log(catalogueID)
  },
  watch: {
    'catalogueForm.domainID':function(newVal,oldVal){
      this.loadPlatformList()
    },
    'catalogueForm.platformID':function(newVal,oldVal){
      this.loadCatalogueList()
    },
    'catalogueForm.theme':function(newVal,oldVal){
      this.primaltplnameList = [];
      this.loadTemplateList(newVal)
    }
  },
  methods: {
     handleClick(tab, event) {
        console.log(tab, event);
      },
    loadDomainList() {
      getDomainUsableList().then(response => {
        if(response.status === 200){
          this.domainOptions = response.data.list
        }
      })
    },
    loadThemeList() {
      getTemplateUsableList().then(response => {
        if(response.status === 200){
          this.themeList = response.data.list
        }
      })
    },
    loadTemplateList(theme) {
      getTemplateUsableList({
        "themeName":theme
      }).then(response => {
        if(response.status === 200){
          this.primaltplnameList = response.data.list
        }
      })
    },
    loadPlatformList() {
      getPlatformUsableList({
        "domainID":this.catalogueForm.domainID
      }).then(response => {
        if(response.status === 200){
          this.platformOptions = response.data.list
        }
      })
    },
    loadCatalogueList() {
      getCatalogueUsableList({
        "domainID":this.catalogueForm.domainID,
        "platformID":this.catalogueForm.platformID,
        "catalogueID":this.catalogueForm.catalogueID
      }).then(response => {
        if(response.status === 200){
          this.catalogueOptions = response.data.list
        }
      })
    },
    handleCannel() {
      this.$router.push({ path: 'catalogue' })
    },
    createData() {
      this.listLoading = true

      const _catalogueForm = this.catalogueForm
      try {
        _catalogueForm.status = _catalogueForm.status.value
      } catch (error) {
        _catalogueForm.status = 6
      }
      if (_catalogueForm.ID > 0) {
        _catalogueForm.catalogueID = _catalogueForm.ID
      }
      saveCatalogue(_catalogueForm).then(response => {
        if (response.status === 200) {
          this.$message({
            message: '操作Success',
            type: 'success'
          })
          this.$router.push({ path: 'catalogue' })
        } else {
          this.$message({
            message: response.msg,
            type: 'error'
          })
        }
      })
    },
    handleDelete(row, index) {
      this.$confirm('确实要执行此操作吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        const formData = {
          'catalogueID': row.ID
        }
        removeCatalogueByID(formData).then(response => {
          if (response.status === 200) {
            this.$message({
              message: '操作Success',
              type: 'success'
            })
            this.$router.push({ path: 'group' })
          } else {
            this.$message({
              message: response.msg,
              type: 'error'
            })
          }
        })
      }).catch(() => {
      })
    }
  }
}
</script>
